<script setup lang="ts">
import { useReportStore } from '@/stores'
import type { pictureDataList,coordinate } from '@/types/report'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import LEchart from '@/pagesReport/lime-echart/components/l-echart/l-echart.vue'
const heartChart = ref()
const snoringChart = ref()
const bPressureChart = ref()
const sleepStageChart = ref()
const report = useReportStore().report
//type coordinate = [number, number] | null
//心率和呼吸
const heartdata = ref<coordinate[]>([])
const breathdata = ref<coordinate[]>([])
//打鼾
const snoringdata = ref<coordinate[]>([])
//血压
const dPressuredata = ref<coordinate[]>([])
const sPressuredata = ref<coordinate[]>([])
//睡眠阶段，status:1深睡，2浅睡，3REM，4清醒，5离床
const sleepStagedata = ref<coordinate[]>([])
//心血管健康诊断
const heartHealth = ref('')
//OSAS诊断
const OSAS = ref('')
//性别文字
const sexText = ref('')
//这个睡眠分期数组里天然是一对不连续时间戳，前后两项的时间戳代表一段时间的睡眠分期，不能采用五种数组加断点的方式来实现
const handleSleepStage = () => {
  report?.picturesData.sleepRanges.forEach((item) => {
    sleepStagedata.value.push([item.start + 8 * 60 * 60 * 1000, item.sleepStatus])
    sleepStagedata.value.push([item.end + 8 * 60 * 60 * 1000, item.sleepStatus])
  })
}
const handleReport = () => {
  addBreakpoint(report!.heartInfo.pictureDataList, heartdata.value)
  addBreakpoint(report!.breathInfo.pictureDataList, breathdata.value)
  addBreakpoint(report!.picturesData.snorePictureDataList, snoringdata.value)
  addBreakpoint(report!.picturesData.humidityPictureDataList, dPressuredata.value)
  addBreakpoint(report!.picturesData.tempPictureDataList, sPressuredata.value)
  handleSleepStage()
  handleHeartHealth()
  handleOSAS()
  handleSex()
}
//判断不连续时间轴，在不连续的地方插入null
//后来发现返回的数据中有goAndOffBedTimeList，可以直接用这个数组来判断
const addBreakpoint = (list: pictureDataList, data: coordinate[]) => {
  let newarr: [number, number][] = []
  list.forEach((item) => {
    item.coordinateList.forEach((i) => {
      newarr.push([i.xvalue + 8 * 60 * 60 * 1000, i.yvalue])
    })
  })
  newarr.forEach((item, index) => {
    if (index > 0) {
      if (item[0] - newarr[index - 1][0] > 1000 * 60) {
        //计算相隔多少分钟，并插入多少个null
        const num = Math.floor((item[0] - newarr[index - 1][0]) / (1000 * 60))
        for (let i = 1; i < num; i++) {
          data.push(null)
        }
      }
    }
    data.push(item)
  })
}
//心率图表配置
const heartoption = ref({
  tooltip: {
    trigger: 'axis',
    confine: true,
  },
  legend: {
    bottom: '3%',
    data: [
      {
        name: '心率',
      },
      {
        name: '呼吸',
      },
    ],
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: 100,
    splitNumber: 5,
  },
  grid: {
    top: '12%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    /* 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color */
    {
      connectNulls: false,
      name: '心率',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: heartdata.value,
      itemStyle: {
        color: '#fd675b',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 50,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 90,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
    {
      connectNulls: false,
      name: '呼吸',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: breathdata.value,
      itemStyle: {
        color: '#4be5b1',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 12,
            lineStyle: {
              color: '#4be5b1',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 20,
            lineStyle: {
              color: '#4be5b1',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
  ],
})
//打鼾图表配置，柱状图的默认图例和折线图不一样,调整起起来有差距，圆形差道横
const snoringoption = ref({
  tooltip: {
    trigger: 'axis',
    confine: true,
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    interval: 1,
  },
  grid: {
    top: '12%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    /* 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color */
    {
      connectNulls: false,
      name: '打鼾次数',
      type: 'bar',
      data: snoringdata.value,
      itemStyle: {
        color: '#4290fd',
      },
    },
  ],
})
//血压图配置
const bPressureoptin = ref({
  tooltip: {
    trigger: 'axis',
    confine: true,
  },
  legend: {
    bottom: '3%',
    data: [
      {
        name: '收缩压',
      },
      {
        name: '舒张压',
      },
    ],
  },
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: 140,
    splitNumber: 7,
  },
  grid: {
    top: '12%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    /* 修改 lineStyle 中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 itemStyle.color */
    {
      connectNulls: false,
      name: '收缩压',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: sPressuredata.value,
      itemStyle: {
        color: '#fb675a',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 139,
            lineStyle: {
              color: '#fb675a',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 90,
            lineStyle: {
              color: '#fd675b',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
    {
      connectNulls: false,
      name: '舒张压',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: dPressuredata.value,
      itemStyle: {
        color: '#3873d6',
      },
      markLine: {
        silent: true,
        symbol: 'none',
        data: [
          {
            yAxis: 60,
            lineStyle: {
              color: '#3873d6',
            },
            label: {
              show: false,
            },
          },
          {
            yAxis: 89,
            lineStyle: {
              color: '#3873d6',
            },
            label: {
              show: false,
            },
          },
        ],
      },
    },
  ],
})
//睡眠分期图配置
const sleepStageoption = ref({
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      rotate: 30,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: false,
    splitLine: {
      show: false,
    },
    min: 0,
    max: 5,
    axisLabel: {
      fontSize: 8,
      formatter: function (value: number) {
        switch (value) {
          case 0:
            return ''
          case 1:
            return '深睡期'
          case 2:
            return '浅睡期'
          case 3:
            return 'REM期'
          case 4:
            return '清醒期'
          case 5:
            return '离床'
        }
      },
    },
  },
  grid: {
    top: '12%',
    left: '16%',
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
    },
  ],
  series: [
    {
      connectNulls: false,
      name: '深睡',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: sleepStagedata.value,
    },
  ],
  visualMap: {
    show: false,
    pieces: [
      {
        gt: 0,
        lte: 1,
        color: '#8fe278',
      },
      {
        gt: 1,
        lte: 2,
        color: '#febf02',
      },
      {
        gt: 2,
        lte: 3,
        color: '#dbe603',
      },
      {
        gt: 3,
        lte: 4,
        color: '#49b4e3',
      },
      {
        gt: 4,
        lte: 5,
        color: '#e3e3e3',
      },
    ],
  },
})

onMounted(async () => {
  handleReport()
  //初始化图表
  console.log('heartdata', heartdata.value)
  const heartchart = await heartChart.value.init(echarts)
  heartchart.setOption(heartoption.value)
  const snoringchart = await snoringChart.value.init(echarts)
  snoringchart.setOption(snoringoption.value)
  const bPressurechart = await bPressureChart.value.init(echarts)
  bPressurechart.setOption(bPressureoptin.value)
  const sleepStagechart = await sleepStageChart.value.init(echarts)
  sleepStagechart.setOption(sleepStageoption.value)
})
//判断心血管健康指数
const handleHeartHealth = () => {
  const index = report!.heartHealthIndex.index
  if (index > 1.1) {
    heartHealth.value =
      '身体疲劳倾向。心血管血行流速较快，出现紊乱倾向，心血管系统亢进倾向。身体过于疲劳，紧张。请注意休息，保证良好睡眠。加强锻炼，禁烟禁酒,改善生活习惯。'
  } else if (index >= 0.8 && index < 1.1) {
    heartHealth.value = '心血管循环系统健康，请继续保持良好生活习惯。'
  } else if (index >= 0.7 && index < 0.8) {
    heartHealth.value =
      '不良倾向。血管内皮功能低下。连续几天心血管健康指数低于0.8，容易诱发性功能低下 (ED) ，高血压，耳鸣等现象。请注意关注血压，及心血管健康。'
  } else if (index >= 0.6 && index < 0.7) {
    heartHealth.value =
      '不良倾向。血管糜烂，呈现初期动脉硬化倾向。连续几天斑块心血管健康指数低于0.7，容易诱发冠心病，糖尿病。请注意关注血糖数据，及心血管健康。'
  } else if (index < 0.6) {
    heartHealth.value =
      '高危风险。心血管血行流速较慢，滞留和混乱倾向，血管呈现粥状硬化倾向。连续几天心血管健康指数低于0.6，血管粥样斑块，引起管腔狭窄预警，发生心肌梗塞，脑卒中等高危心血管疾病。'
  }
}
//判断OSAS
const handleOSAS = () => {
  const index = +report!.breathEvent.totalAHI
  if (index < 5) {
    return
  } else if (index >= 5 && index < 15) {
    OSAS.value = '轻度睡眠呼吸暂停综合征'
  } else if (index >= 15 && index < 30) {
    OSAS.value = '中度睡眠呼吸暂停综合征'
  } else if (index >= 30) {
    OSAS.value = '重度睡眠呼吸暂停综合征'
  }
}
//处理性别文字
const handleSex = () => {
  switch (report?.userInfo.sex) {
    case 0:
      sexText.value = '保密'
      break
    case 1:
      sexText.value = '男'
      break
    case 2:
      sexText.value = '女'
      break
  }
}
//离床次数
const offBedCount = () => {
  uni.navigateTo({
    url: '/pagesReport/report-detail/off-bed-count/off-bed-count',
  })
}
//REM科普弹窗
const showREM = ref(false)
const showREMdetail = () => {
  console.log('show')
  showREM.value = true
}
const closeREM = () => {
  showREM.value = false
}
//AHI科普弹窗
const showAHI = ref(false)
const showAHIdetail = () => {
  showAHI.value = true
}
//心血管健康指数说明书
const showblooddetail = () => {
  uni.navigateTo({
    url: '/pagesReport/report-detail/heart-synopsis/heart-synopsis',
  })
}
//血压科普
const showbloodPressuredetail = () => {
  uni.navigateTo({
    url: '/pagesReport/report-detail/blood-pressure/blood-pressure',
  })
}
const closeAHI = () => {
  showAHI.value = false
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <view class="navbar">
      <view class="title">
        <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
        {{ report?.userInfo.name }}的报告
      </view>
    </view>
    <view class="info_card">
      <view class="prile_box">
        <up-avatar :src="report?.userInfo.picture" size="74"></up-avatar>
        <view class="prile">
          <text v-if="report?.userInfo.name">{{ report.userInfo.name }}</text>
          <text v-if="report?.userInfo"
            >{{ sexText }} | {{ report.userInfo.age + '岁' }} |
            {{ report.userInfo.weight + 'kg' }}
          </text>
          <text>{{ report?.monitorInfo.monitorDate }}</text>
        </view>
      </view>
    </view>
    <!-- scroll-view里不能使用echarts -->
    <!-- <scroll-view scroll-y class="scroll-view"> -->
    <!--睡眠平衡指数  -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_monitor.png" />
      <view>睡眠平衡指数</view>
    </view>
    <view class="slepQua" :class="{ lowslepQUa: report!.monitorInfo.slpQua < 60 }">
      <view class="score">
        {{ report?.monitorInfo.slpQua }}
      </view>
      <view class="evaluate">
        <view v-if="report!.monitorInfo.slpQua >= 60">
          {{ '积极睡眠。有活力积极睡眠，可以快速恢复疲劳。' }}
        </view>
        <view v-else>{{ '正常平衡性睡眠' }}</view>
      </view>
    </view>
    <!-- 监测信息 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_monitor.png" />
      <view>监测信息</view>
    </view>
    <view class="monitor-info box">
      <!-- 第一横行 -->
      <view class="row">
        <view class="cell">
          <view class="head">
            {{ '睡眠开始' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.goBedTime }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ '睡眠结束' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.offBedTime }}
          </view>
        </view>
      </view>
      <!-- 第二横行 -->
      <view class="row">
        <view class="cell">
          <view class="head">
            {{ '总睡眠时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.totalSleepTime }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ '卧床时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.inBedTime }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ '总记录时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.totalRecordTime }}
          </view>
        </view>
      </view>
      <!-- 第三横行 -->
      <view class="row">
        <view class="cell">
          <view class="head">
            {{ '入睡后清醒时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.wakingTime }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ '睡眠潜伏时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.sleepHideTime }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ 'R期潜伏时间' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.rhideTime }}
          </view>
        </view>
      </view>
      <!-- 第四横行 -->
      <view class="row">
        <view class="cell">
          <view class="head">
            {{ '清醒次数' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.wakingCount }}
          </view>
        </view>
        <view class="cell">
          <view class="head" @click="offBedCount">
            {{ '离床次数' }}
            <img src="@/static/report-icon/问号.svg" alt="" class="question-mark" />
          </view>
          <view class="data">
            {{ report?.monitorInfo.offBedCount }}
          </view>
        </view>
        <view class="cell">
          <view class="head">
            {{ '睡眠效率' }}
          </view>
          <view class="data">
            {{ report?.monitorInfo.sleepEfficiency }}
          </view>
        </view>
      </view>
    </view>
    <!--睡眠分期 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_sleep.png" />
      <view>睡眠分期</view>
    </view>
    <view class="sleep-stage box">
      <view class="row">
        <view class="cell"> 睡眠分期 </view>
        <view class="cell"> 持续时间 </view>
        <view class="cell"> 睡眠时间 </view>
      </view>
      <view class="row">
        <view class="cell">清醒期 </view>
        <view class="cell">{{ report?.sleepStagesInfo.wakeupTime }} </view>
        <view class="cell" style="color: #f6fafb">ssw</view>
      </view>
      <view class="row">
        <view class="cell">
          <view @click="showREMdetail"
            >{{ 'R期' }}
            <img src="@/static/report-icon/问号.svg" alt="" class="question-mark" />
          </view>
        </view>
        <view class="cell">{{ report?.sleepStagesInfo.rtime }} </view>
        <view class="cell">{{ report?.sleepStagesInfo.rpercent }}</view>
      </view>
      <view class="row">
        <view class="cell"> 潜睡</view>
        <view class="cell"> {{ report?.sleepStagesInfo.lowSleepTime }}</view>
        <view class="cell"> {{ report?.sleepStagesInfo.lowSleepPercent }}</view>
      </view>
      <view class="row">
        <view class="cell"> 深睡</view>
        <view class="cell"> {{ report?.sleepStagesInfo.deepSleepTime }}</view>
        <view class="cell"> {{ report?.sleepStagesInfo.deepSleepPercent }}</view>
      </view>
    </view>
    <!-- 呼吸事件 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_breath.png" />
      <view>呼吸事件</view>
    </view>
    <view class="breath-event box">
      <view class="row">
        <view class="cell">参数 </view>
        <view class="cell">结果</view>
        <view class="cell">参照范围</view>
      </view>
      <view class="row">
        <view class="cell">总呼吸暂停次数</view>
        <view class="cell">{{ report?.breathEvent.totalCount + '次' }}</view>
        <view class="cell" style="color: #f6fafb">ssw</view>
      </view>
      <view class="row">
        <view class="cell">
          <view @click="showAHIdetail"
            >{{ 'AHI' }}
            <img src="@/static/report-icon/问号.svg" alt="" class="question-mark" />
          </view>
        </view>
        <view class="cell">{{ report?.breathEvent.totalAHI + '次' }}</view>
        <view class="cell">{{ '<5' }}</view>
      </view>
      <view class="row">
        <view class="cell">睡眠期平均呼吸<br />（次/分）</view>
        <view class="cell">{{ report?.breathInfo.avgBreathCount + 'bpm' }}</view>
        <view class="cell">{{ '12-20bpm' }}</view>
      </view>
      <view class="row">
        <view class="cell">睡眠期最慢呼吸<br />（次/分）</view>
        <view class="cell">{{ report?.breathInfo.minBreathCount + 'bpm' }}</view>
        <view class="cell">{{ '--' }}</view>
      </view>
      <view class="row">
        <view class="cell">睡眠期最快呼吸<br />（次/分）</view>
        <view class="cell">{{ report?.breathInfo.maxBreathCount + 'bpm' }}</view>
        <view class="cell">{{ '--' }}</view>
      </view>
      <view class="row">
        <view class="cell">呼吸变异指数</view>
        <view class="cell">{{ report?.breathInfo.breathIndex }}</view>
        <view class="cell">{{ '<6' }}</view>
      </view>
    </view>
    <!-- 心率情况 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_heart.png" />
      <view>心率情况</view>
    </view>
    <view class="heart-rate box">
      <view class="row">
        <view class="cell">睡眠期平均心率<br />（次/分）</view>
        <view class="cell">{{ report?.heartInfo.avgHeartCount + 'bpm' }}</view>
        <view class="cell">{{ '50~90bpm' }}</view>
      </view>
      <view class="row">
        <view class="cell">睡眠期最慢心率<br />（次/分）</view>
        <view class="cell">{{ report?.heartInfo.minHeartCount + 'bpm' }}</view>
        <view class="cell">{{ '50~70bpm' }}</view>
      </view>
      <view class="row">
        <view class="cell">睡眠期最快心率<br />（次/分）</view>
        <view class="cell">{{ report?.heartInfo.maxHeartCount + 'bpm' }}</view>
        <view class="cell">{{ '60~90bpm' }}</view>
      </view>
      <view class="row">
        <view class="cell">
          <view @click="showblooddetail"
            >{{ '心血管健康指数' }}
            <img src="@/static/report-icon/问号.svg" alt="" class="question-mark" />
          </view>
        </view>
        <view
          class="cell"
          :style="{
            color:
              report!.heartHealthIndex.index > 0.8 && report!.heartHealthIndex.index <= 1.1
                ? '#2fbcaf'
                : '#e14045',
          }"
          >{{ report?.heartHealthIndex.index }}</view
        >
        <view class="cell">{{ '0.8~1.2' }}</view>
      </view>
      <view class="row">
        <view class="cell">心率变异指数</view>
        <view class="cell">{{ report?.heartInfo.heartIndex }}</view>
        <view class="cell">{{ '<10' }}</view>
      </view>
      <view class="row">
        <view class="cell">晨脉<br />（次/分）</view>
        <view class="cell">{{ report?.heartInfo.morningPulse + '次/分' }}</view>
        <view class="cell">{{ '60~80次/分' }}</view>
      </view>
    </view>
    <!-- 血压情况 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_pressure.png" />
      <view>血压情况</view>
      <img
        src="@/static/report-icon/问号.svg"
        alt=""
        class="question-mark"
        style="width: 32.692rpx; height: 32.692rpx"
        @click="showbloodPressuredetail"
      />
    </view>
    <!-- 单位行 -->
    <view class="unit"> 单位：mmHg </view>
    <view class="pressure-one box">
      <view class="row">
        <view class="cell">{{ '--' }}</view>
        <view class="cell">入睡</view>
        <view class="cell">起床</view>
        <view class="cell">参考范围</view>
      </view>
      <view class="row">
        <view class="cell">收缩压</view>
        <view class="cell">{{ report?.pressure.goSleepPressure.high }}</view>
        <view class="cell">{{ report?.pressure.offBedPressure.high }}</view>
        <view class="cell">{{ '90~139' }}</view>
      </view>
      <view class="row">
        <view class="cell">舒张压</view>
        <view class="cell">{{ report?.pressure.goSleepPressure.low }}</view>
        <view class="cell">{{ report?.pressure.offBedPressure.low }}</view>
        <view class="cell">{{ '60~89' }}</view>
      </view>
    </view>
    <view class="pressure-two box">
      <view class="row">
        <view class="cell">监测期</view>
        <view class="cell">最低</view>
        <view class="cell">最高</view>
        <view class="cell">平均</view>
        <view class="cell">参考范围</view>
      </view>
      <view class="row">
        <view class="cell">收缩压</view>
        <view class="cell">{{ report?.pressure.minPressure.high }}</view>
        <view class="cell">{{ report?.pressure.maxPressure.high }}</view>
        <view class="cell">{{ report?.pressure.avgPressure.high }}</view>
        <view class="cell">{{ '90~139' }}</view>
      </view>
      <view class="row">
        <view class="cell">舒张压</view>
        <view class="cell"> {{ report?.pressure.minPressure.low }}</view>
        <view class="cell">{{ report?.pressure.maxPressure.low }}</view>
        <view class="cell"> {{ report?.pressure.avgPressure.low }}</view>
        <view class="cell"> {{ '60~89' }}</view>
      </view>
    </view>
    <!-- 心率/呼吸/体动 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_heart.png" />
      <view>心率/呼吸/体动</view>
    </view>
    <view class="chart">
      <LEchart ref="heartChart"></LEchart>
    </view>
    <!-- 打鼾 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_graph.png" />
      <view>打鼾</view>
    </view>
    <view class="unit"> 单位：次/分钟 </view>
    <view class="chart">
      <LEchart ref="snoringChart"></LEchart>
    </view>
    <!-- 血压 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_graph.png" />
      <view>血压</view>
    </view>
    <view class="unit"> 单位：mmHg </view>
    <view class="chart">
      <LEchart ref="bPressureChart"></LEchart>
    </view>
    <!-- 血氧 -->
    <view class="subtitle">
      <img src="@/static/report-icon/iv_graph.png" />
      <view>血氧</view>
    </view>
    <view class="unit"> 单位：% </view>
    <view class="chart">
      <img src="@/static/report-icon/iv_empty.png" class="no-data" />
    </view>
    <view class="subtitle">
      <img src="@/static/report-icon/iv_graph.png" />
      <view>睡眠阶段图</view>
    </view>
    <view class="chart">
      <LEchart ref="sleepStageChart"></LEchart>
    </view>
    <view class="subtitle">
      <img src="@/static/report-icon/iv_comment.png" />
      <view>综合评价</view>
    </view>
    <view>
      <view class="Overview">
        <view style="margin-bottom: 19.231rpx">{{ '概述' }}</view>
        <view>{{
          '1.呼吸事件：最快呼吸:' +
          report?.breathInfo.maxBreathCount +
          '次/分钟;' +
          '最慢呼吸:' +
          report?.breathInfo.minBreathCount +
          '次/分钟'
        }}</view>
        <view>{{
          '2.心率事件：最快心率' +
          report?.heartInfo.maxHeartCount +
          '次/分钟;' +
          '最慢呼吸:' +
          report?.heartInfo.minHeartCount +
          '次/分钟'
        }}</view>
        <view
          >{{ '离床情况：' }}
          {{
            report?.monitorInfo.offBedCount ? `有，离床${report?.monitorInfo.offBedCount}次` : '无'
          }}</view
        >
        <view>{{ '血氧情况：无' }}</view>
        <view
          >{{ '血压情况' }}<br />{{
            '入睡时:收缩压/舒张压 ' +
            report?.pressure.goSleepPressure.high +
            '/' +
            report?.pressure.goSleepPressure.low +
            'mmHg'
          }}<br />{{
            '起床时:收缩压/舒张压 ' +
            report?.pressure.offBedPressure.high +
            '/' +
            report?.pressure.offBedPressure.low +
            'mmHg'
          }}<br />{{
            '监测期平均血压 ' +
            report?.pressure.avgPressure.high +
            '/' +
            report?.pressure.avgPressure.low +
            'mmHg'
          }}</view
        >
        <view>{{ '结论' }}</view>
        <view>
          {{
            '1.睡眠效率' +
            report?.monitorInfo.sleepEfficiency +
            ',' +
            '入睡清醒' +
            report?.monitorInfo.wakingCount +
            '次'
          }}<br />{{
            '2.睡眠结构：R期：' +
            report?.sleepStagesInfo.rpercent +
            ', 浅睡：' +
            report?.sleepStagesInfo.lowSleepPercent +
            ',深睡：' +
            report?.sleepStagesInfo.deepSleepPercent
          }}<view
            :style="{
              color:
                report!.heartHealthIndex.index > 0.8 && report!.heartHealthIndex.index <= 1.1
                  ? '#000000'
                  : '#e14045',
            }"
            >{{ '3.心血管健康：' + report?.heartHealthIndex.index + ',' + heartHealth }}</view
          >
          <view v-if="+report!.breathEvent.totalAHI >= 5">{{ '4.OSAS：' + OSAS }}</view>
          <view>{{ '建议：请结合临床' }}</view>
        </view>
      </view>
    </view>
    <!-- </scroll-view> -->
    <u-popup :show="showREM" mode="center" @close="closeREM">
      <view class="REM">
        <view style="display: flex; align-items: center; margin-bottom: 28.846rpx">
          <img
            src="@/static/report-icon/竖分割线.svg"
            alt=""
            style="width: 28.846rpx; height: 48.077rpx"
          />REM</view
        >
        <view style="padding: 11.538rpx; line-height: 48.077rpx; font-size: 30.769rpx">
          REM快速睡眠，是一个睡眠的阶段，眼球在此阶段时会呈现不由自主的快速移动。人的睡眠，一夜
          中大约有4~6个睡眠周期出现，互相连接，周而复始。首先，从上床就寝到开始入睡之间的时间，称之为入睡潜伏期，成年人一般为20~23分钟。然后进入NREM睡眠第一期，大约经过0.5~7分钟，即进入NREM睡眠第二期30~38分钟后，进入NREM睡眠的第三期及第四期(合称6睡眠)，持续约数分钟至1小时:
          <br />
          再回到NREM睡眠第二期:大约在开始入睡后70~90分钟，进入REM睡眠，通常只有5分钟左右:接着再回到NREM睡眠第二期，也即第二个睡眠周期的开始。从第二个睡眠周期开始，睡眠逐渐缩短而REM睡
          眠逐渐延长，每隔90分钟左右为一个周期。
        </view>
      </view>
    </u-popup>
    <u-popup mode="center" :show="showAHI" @close="closeAHI">
      <view class="AHI">
        <view style="display: flex; align-items: center; margin-bottom: 28.846rpx">
          <img
            src="@/static/report-icon/竖分割线.svg"
            alt=""
            style="width: 28.846rpx; height: 48.077rpx"
          />AHI</view
        >
        <view style="padding: 11.538rpx; line-height: 48.077rpx; font-size: 30.769rpx"
          >{{
            'AHI指数是指睡眠中平均每小时呼吸暂停+低通气次数，正常值是<5，5-15为轻度睡眠呼吸暂停综合征，15-30为中度睡眠呼吸暂停综合征，>30为重度睡眠呼吸暂停综合征。'
          }}
        </view>
      </view>
    </u-popup>
  </view>
</template>
<style lang="scss">
page {
  font-family: PingFangSC-regular;
  .content {
    display: flex;
    flex-direction: column;
    position: relative;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
      display: none;
    }
    .navbar {
      position: fixed;
      width: 100%;
      height: 180.769rpx;
      background: url(@/static/starry2.png) no-repeat;
      background-size: contain;
      box-sizing: border-box;
      z-index: 999;
      .title {
        margin-top: 115.385rpx;
        margin-bottom: 28.846rpx;
        font-size: 34.615rpx;
        color: #ffff;
        text-align: center;
        .u-icon {
          position: absolute;
          left: 3%;
        }
      }
    }
    .info_card {
      margin: 200rpx auto 28.846rpx;
      padding-bottom: 28.846rpx;
      width: 651.923rpx;
      height: 211.538rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid rgba(187, 187, 187, 1);
      .prile_box {
        padding-top: 26.923rpx;
        padding-left: 23.077rpx;
        width: 576.923rpx;
        display: flex;
        font-size: 26.923rpx;
        .prile {
          display: flex;
          height: 138.462rpx;
          padding-left: 38.462rpx;
          flex-direction: column;
          justify-content: space-between;
          font-family: PingFangSC-light;
        }
      }
    }
    .subtitle {
      display: flex;
      align-items: center;
      font-size: 30.769rpx;
      image {
        width: 26.923rpx;
        height: 26.923rpx;
        margin: 19.231rpx;
      }
    }
    .slepQua {
      width: 651.923rpx;
      height: 192.308rpx;
      margin: 19.231rpx auto 28.846rpx;
      background-color: #f6fafb;
      color: #4b97f7;
      display: flex;
      align-items: center;
      .score {
        font-size: 67.308rpx;
        margin: 0 48.077rpx;
      }
      .evaluate {
        view {
          font-size: 26.923rpx;
          font-weight: 700;
          padding-right: 48.077rpx;
        }
      }
    }
    .lowslepQUa {
      color: #faba19 !important;
    }
    .row {
      height: 69.231rpx;
      background-color: #fff;
      margin-bottom: 19.231rpx;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n) {
        background-color: #f6fafb;
      }
      .question-mark {
        width: 30.769rpx !important;
        height: 30.769rpx !important;
        vertical-align: middle;
      }
      .cell {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 23.077rpx;
        color: #333333;
      }
    }
    .box {
      width: 651.923rpx;
      background-color: #f6fafb;
      margin: 19.231rpx auto 28.846rpx;
      padding: 19.231rpx;
    }
    .monitor-info {
      height: 346.154rpx;
      .head {
        font-size: 19.231rpx;
        color: #999999;
      }
    }
    .chart {
      position: relative;
      width: 651.923rpx;
      margin: 0 auto;
      height: 567.308rpx;
      .no-data {
        width: 144.231rpx;
        height: 157.692rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .unit {
      font-size: 23.077rpx;
      color: #999999;
      height: 30.769rpx;
      width: 651.923rpx;
      margin: 0 auto 9.615rpx;
    }
    .Overview {
      height: 100%;
      width: 651.923rpx;
      margin: 0 auto;
      font-size: 26.923rpx;
      line-height: 57.692rpx;
      padding-bottom: 57.692rpx;
    }
    .REM {
      width: 596.154rpx;
      height: 957.692rpx;
      padding: 30.769rpx;
    }
    .AHI {
      width: 596.154rpx;
      height: 400rpx;
      padding: 30.769rpx;
    }
  }
}
</style>
